<template>
  <div class="body" v-loading="loading.status">
    <el-form
      class="form"
      :model="form"
      ref="refForm"
      v-loading="loading.form"
      style="margin-bottom: 50px"
    >
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="商务"
            v-if="jsAuthJudgment('manage')"
            :label-width="fromViewCofing.label_width"
            :rules="[{ required: true, message: '商务不能为空' }]"
            prop="business_uid"
          >
            <el-select
              filterable
              class="inp"
              size="mini"
              v-model="form.business_uid"
              placeholder="请选择"
            >
              <el-option
                v-for="b in business_list"
                :key="b.id"
                :label="b.nickname"
                :value="b.id"
              >
                <span style="float: left">{{ b.nickname }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{
                  b.group_name
                }}</span>
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            :rules="[{ required: true, message: '名字不能为空' }]"
            label="名字"
            prop="name"
            :label-width="fromViewCofing.label_width"
          >
            <el-input v-model="form.name" class="inp" size="mini"></el-input>
          </el-form-item>

          <el-form-item label="logo" :label-width="fromViewCofing.label_width">
            <UploadingFile
              accept=".jpg,.png"
              :limit="1"
              :list-type="'picture-card'"
              :fileList="form.logo_img"
              @upload-success="(files) => handleUploadingImg('logo_img', files)"
            ></UploadingFile>
          </el-form-item>

          <el-form-item
            label="手机号"
            :label-width="fromViewCofing.label_width"
          >
            <el-input
              class="inp"
              size="mini"
              v-model="form.phone"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="账号"
            :rules="[{ required: true, message: '账号不能为空' }]"
            prop="username"
            :label-width="fromViewCofing.label_width"
          >
            <el-input
              class="inp"
              size="mini"
              v-model="form.username"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item label="密码" :label-width="fromViewCofing.label_width">
            <el-input
              class="inp"
              size="mini"
              v-model="form.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="贷款类型"
            :label-width="fromViewCofing.label_width"
          >
            <el-select
              class="inp"
              size="mini"
              v-model="form.loantype"
              placeholder="请选择"
              style="margin-right: 10px"
            >
              <el-option label="全国" value="nationwide"></el-option>
              <el-option label="区域" value="region"></el-option>
              <el-option label="同业" value="peer"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item
            label="最低借款金额"
            :rules="[{ required: true, message: '最低借款金额不能为空' }]"
            prop="loan_min"
            :label-width="fromViewCofing.label_width"
          >
            <el-input
              class="inp"
              size="mini"
              v-model="form.loan_min"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="最高借款金额"
            :rules="[{ required: true, message: '最高借款金额不能为空' }]"
            prop="loan_max"
            :label-width="fromViewCofing.label_width"
          >
            <el-input
              class="inp"
              size="mini"
              v-model="form.loan_max"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="借款周期"
            :rules="[{ required: true, message: '借款周期不能为空' }]"
            prop="loan_cycle"
            :label-width="fromViewCofing.label_width"
          >
            <el-input
              class="inp"
              size="mini"
              v-model="form.loan_cycle"
              autocomplete="off"
            ></el-input>
          </el-form-item>

          <el-form-item
            label="年利率"
            :rules="[{ required: true, message: '年利率不能为空' }]"
            prop="loan_cycle"
            :label-width="fromViewCofing.label_width"
          >
            <el-input
              class="inp"
              size="mini"
              v-model="form.apr"
              autocomplete="off"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-row>
            <el-col :span="12">
              <el-form-item
                label="登录状态"
                :label-width="fromViewCofing.label_width"
              >
                <el-switch
                  size="mini"
                  v-model="form.login_status"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>

            <el-col :span="12">
              <el-form-item
                label="进件状态"
                :label-width="fromViewCofing.label_width"
              >
                <el-switch
                  size="mini"
                  v-model="form.entry_status"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="短信通知状态"
                :label-width="fromViewCofing.label_width"
              >
                <el-switch
                  size="mini"
                  v-model="form.sms_notification_status"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="余额统计"
                :label-width="fromViewCofing.label_width"
              >
                <el-switch
                  size="mini"
                  v-model="form.balance_display_status"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="消耗展示状态"
                :label-width="fromViewCofing.label_width"
              >
                <el-switch
                  size="mini"
                  v-model="form.consumption_display_status"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item
                label="风控状态"
                :label-width="fromViewCofing.label_width"
              >
                <el-switch
                  size="mini"
                  v-model="form.risk_control_status"
                  :active-value="1"
                  :inactive-value="0"
                >
                </el-switch>
              </el-form-item>
            </el-col>
          </el-row>

          <el-form-item
            label="营业执照"
            :label-width="fromViewCofing.label_width"
          >
            <UploadingFile
              accept=".jpg,.png"
              :limit="4"
              :fileList="form.business_license_img"
              @upload-success="
                (files) => handleUploadingImg('business_license_img', files)
              "
            ></UploadingFile>
          </el-form-item>

          <el-form-item
            label="法人身份证"
            :label-width="fromViewCofing.label_width"
          >
            <UploadingFile
              accept=".jpg,.png"
              :limit="4"
              :fileList="form.corporate_card_img"
              @upload-success="
                (files) => handleUploadingImg('corporate_card_img', files)
              "
            ></UploadingFile>
          </el-form-item>

          <el-form-item
            label="办公场地视频"
            :label-width="fromViewCofing.label_width"
          >
            <UploadingFile
              accept=".mp4"
              accept_type="video"
              :limit="4"
              :fileList="form.office_video"
              @upload-success="
                (files) => handleUploadingImg('office_video', files)
              "
            ></UploadingFile>
          </el-form-item>

          <el-form-item
            label="推广服务合作协议"
            :label-width="fromViewCofing.label_width"
          >
            <UploadingFile
              accept=".jpg,.png"
              :limit="4"
              :fileList="form.cooperation_agreement_img"
              @upload-success="
                (files) =>
                  handleUploadingImg('cooperation_agreement_img', files)
              "
            ></UploadingFile>
          </el-form-item>

          <el-form-item
            label="承诺函"
            :label-width="fromViewCofing.label_width"
          >
            <UploadingFile
              accept=".jpg,.png"
              :limit="4"
              :fileList="form.commitment_letter_img"
              @upload-success="
                (files) => handleUploadingImg('commitment_letter_img', files)
              "
            ></UploadingFile>
          </el-form-item>
        </el-col>
      </el-row>

      <div class="form_footer">
        <el-button type="success" @click="fromSubmit">提交</el-button>
      </div>
    </el-form>
  </div>
</template>

<script>
import Uploading from "@/components/Uploading/Uploading.vue";
import UploadingFile from "@/components/Uploading/UploadingFile.vue";
import { arrayToString, stringToArray } from "@/utils/arrayUtil";
import {
  apiAgentList,
  apiGroupList,
  apiAgentCreate,
  apiAgentUpdate,
  apiOrganizationCreate,
  apiOrganizationDetails,
} from "@/api/apiCommon";
import { appUtil, authJudgment, getUserId } from "@/utils/appUtil";
export default {
  name: "Index",
  components: {
    Uploading,
    UploadingFile,
  },
  data() {
    return {
      init_form: {
        id: 0,
        logo_img: "",
        name: "",
        phone: "",
        username: "",
        password: "",
        confirm_password: "",
        loantype: "nationwide",
        loan_min: "1",
        loan_max: "200000",
        business_license_img: "",
        corporate_card_img: "",
        office_video: "",
        cooperation_agreement_img: "",
        commitment_letter_img: "",
        login_status: 1,
        entry_status: 1,
        sms_notification_status: 0,
        balance_display_status: 0,
        consumption_display_status: 0,
        risk_control_status: 0,
        loan_cycle: "36",
        apr: "16",
      },
      form: {},
      fromViewCofing: {
        input_width: "120px",
        label_width: "160px",
      },
      business_list: [],
      loading: {
        dialog_create: false,
        table: false,
        form: false,
      },
    };
  },
  created() {
    var params = this.$route.query;
    if (params.id != 0) {
      this.req_details(params.id);
    }
    var form = { ...this.init_form };
    form.business_uid = getUserId();
    this.form = form;
    if (authJudgment("manage")) {
      this.req_agent();
    }
  },
  methods: {
    //图片展示
    AppResShow(url) {
      return getImgUrl(url);
    },
    // 图片上传成功
    handleUploadingImg(field, files) {
      console.log("图片上传成功", [field, files]);
      var form = this.form;
      form[field] = files.join(", ");
      this.form = form;
      this.$forceUpdate();
    },
    // 图片删除
    handleRemoveLogo(file) {
      console.log("图片删除");
      var form = this.form;
      form["logo_img"] = "";
      this.form = form;
      // this.$refs.ref_uploadImg.$children[1].$el.style.display = ''
      this.$forceUpdate();
      console.log(file);
    },
    /**表单提交 */
    fromSubmit() {
      const _this = this;
      var form = this.form;
      var reqData = {};
      reqData.id = form.id;
      reqData.logo_img = form.logo_img;
      reqData.name = form.name;
      reqData.phone = form.phone;
      reqData.username = form.username;
      reqData.password = form.password;
      reqData.loantype = form.loantype;
      reqData.loan_min = form.loan_min;
      reqData.loan_max = form.loan_max;
      reqData.business_uid = form.business_uid;
      reqData.business_license_img = form.business_license_img;
      reqData.corporate_card_img = form.corporate_card_img;
      reqData.office_video = form.office_video;
      reqData.cooperation_agreement_img = form.cooperation_agreement_img;
      reqData.commitment_letter_img = form.commitment_letter_img;
      reqData.login_status = form.login_status;
      reqData.push_status = form.push_status;
      reqData.entry_status = form.entry_status;
      reqData.sms_notification_status = form.sms_notification_status;
      reqData.balance_display_status = form.balance_display_status;
      reqData.risk_control_status = form.risk_control_status;
      reqData.consumption_display_status = form.consumption_display_status;
      reqData.loan_cycle = form.loan_cycle;
      reqData.apr = form.apr;
      if (!reqData.password) {
        reqData.password = "";
      }

      _this.loading_start("form");
      this.$refs["refForm"].validate((valid) => {
        if (valid) {
          apiOrganizationCreate(reqData)
            .then((response) => {
              _this.$message({
                message: response.msg,
                type: "success",
              });
              _this.loading_end("form");
              if (reqData.id == 0) {
                _this.$router.go(-1);
              }
            })
            .catch(function (result) {
              _this.loading_end("form");
            });
        } else {
          return false;
        }
      });
    },
    //获取商务人员
    req_agent() {
      const _this = this;

      _this.loading_start("form");
      apiAgentList({
        page: 1,
        size: 999,
        status: "normal",
        group_id: "2,3,5",
      })
        .then((response) => {
          const result = response.data.datalist.data;
          _this.business_list = result;
          _this.loading_end("form");
        })
        .catch(function (result) {
          _this.loading_end("form");
        });
    },
    // 获取详情
    req_details(id) {
      if (!id) {
        return;
      }
      const _this = this;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)",
      });
      apiOrganizationDetails({
        id: id,
      })
        .then((response) => {
          const result = response.data.details;
          var form = result;
          form.username = result.user.username;
          _this.form = form;
          loading.close();
        })
        .catch(function (result) {
          _this.$message.error(result.msg);
        });
    },
    // 权限判断
    jsAuthJudgment(agree_group) {
      return authJudgment(agree_group);
    },
    // 加载开始...
    loading_start(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = true;
          setTimeout(() => {
            this.loading[key] = false;
          }, 5000);
        });
      } else {
        this.loading[keys] = true;
        setTimeout(() => {
          this.loading[keys] = false;
        }, 5000);
      }
    },
    // 加载结束...
    loading_end(keys) {
      if (Array.isArray(keys)) {
        keys.forEach((key) => {
          this.loading[key] = false;
        });
      } else {
        this.loading[keys] = false;
      }
    },
  },
};
</script>

<style lang="scss">
</style>